<script setup lang="ts">/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
import {StoreForm} from "@/api/store/types";

defineOptions({
	name: "OmsOrder",
	inheritAttrs: false,
});
import lodash from 'lodash-es'
import {
	getOrderPage,
	exportOmsOrder
} from "@/api/omsOrder";

import { exportStore, listAll } from "@/api/store";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const ids = ref([]);
const monthList = ref<[]>([]);
const storeList = ref<StoreForm[]>();
const total = ref(0);

const queryParams = reactive<any>({
	pageNum: 1,
	pageSize: 20,
	erpNoType: 1
});
const billColumnList = ref<[]>();



/**
 * 查询
 */
function handleQuery() {
	loading.value = true;
	if (lodash.size(monthList.value) > 0){
		lodash.set(queryParams, 'startMonth', monthList.value[0])
		lodash.set(queryParams, 'endMonth', monthList.value[1])
	}
	getOrderPage(queryParams)
	.then(({data}) => {
		billColumnList.value = data.list;
		total.value = data.total;
	})
	.finally(() => {
		loading.value = false;
	});
}

/** 重置查询 */
function resetQuery() {
	queryParams.pageNum = 1;
	handleQuery();
}

/**
 * 获取所有店铺
 */
function getAllStore() {
	listAll().then((response) => {
		storeList.value = []
		const group_store = lodash.groupBy(response.data, 'storeKeyName');
		for (let key in group_store) {
			storeList.value.push({'label': key, 'options': group_store[key]})
		}
	})
}

/**
 * 行checkbox change事件
 */
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: any) => item.id);
}

function handleExport() {
	const strIds = [ids.value].join(",");
	exportOmsOrder(strIds).then((response: any) => {
		const blob = new Blob([response.data], {
			type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
		});
		const a = document.createElement("a");
		const href = window.URL.createObjectURL(blob); // 下载的链接
		a.href = href;
		a.download = decodeURI(
			response.headers["content-disposition"].split(";")[1].split("=")[1]
		); // 获取后台设置的文件名称
		document.body.appendChild(a);
		a.click(); // 点击导出
		document.body.removeChild(a); // 下载完成移除元素
		window.URL.revokeObjectURL(href); // 释放掉blob对象
	});
}

function changeErpBtn() {
	if (queryParams.erpNoType === 0) {
		queryParams.erpNo = ''
	}
}

onMounted(() => {
	let now = new Date()
	let month = now.getMonth()
	let nowMonth;
	if (month < 9){
	  nowMonth = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
	}	else {
	  nowMonth = now.getFullYear() + '' + (now.getMonth() + 1) + ''
	}
	monthList.value = [nowMonth, nowMonth]
	getAllStore()
	handleQuery(); // 初始化标准账单配置列表数据
});
</script>

<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col>
				<div class="search-container">
				  <el-form ref="queryFormRef" :model="queryParams" :inline="true">
					  <el-form-item label="订单月份">
							<el-date-picker
					  			style="width: 200px"
									v-model="monthList"
									type="monthrange"
									range-separator="至"
									start-placeholder="开始月份"
									end-placeholder="结束月份"
									value-format="YYYYMM"
									:clearable="false"
							/>
					  </el-form-item>
					<el-form-item label="OMS单号" prop="orderNo">
					  <el-input
						v-model="queryParams.orderNo"
						placeholder="请输入OMS单号"
						clearable
						style="width: 180px"
						@keyup.enter="handleQuery"
					  />
					</el-form-item>
						<el-form-item label="商店" prop="storeId">
							<el-select class="yz-el-select" v-model="queryParams.storeId" filterable clearable placeholder="请选择店铺">
								<el-option-group
									v-for="group in storeList"
									:key="group.label"
									:label="group.label"
								>
									<el-option
										v-for="item in group.options"
										:key="item.id"
										:label="item.innerSystemStoreName"
										:value="item.id"
									/>
								</el-option-group>
							</el-select>
						</el-form-item>
						<el-form-item label="网店交易号" prop="storeTradeNo">
							<el-input
									v-model="queryParams.storeTradeNo"
									placeholder="请输入网店交易号"
									clearable
									style="width: 180px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="子交易号" prop="subNo">
							<el-input
									v-model="queryParams.subNo"
									placeholder="请输入子交易号"
									clearable
									style="width: 180px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="原始交易号" prop="originalNo">
							<el-input
									v-model="queryParams.originalNo"
									placeholder="请输入原始交易号"
									clearable
									style="width: 180px"
									@keyup.enter="handleQuery"
							/>
						</el-form-item>
						<el-form-item label="ERP单号" prop="erpNo">
							<el-radio-group v-model="queryParams.erpNoType" @change="changeErpBtn">
								<el-radio :value="0">空白</el-radio>
								<el-radio :value="1">非空白</el-radio>
							</el-radio-group>
							<el-input
									v-if="queryParams.erpNoType === 1"
									v-model="queryParams.erpNo"
									placeholder="请输入ERP单号"
									clearable
									style="width: 180px;margin-left: 20px;"
									@keyup.enter="handleQuery"
							/>

						</el-form-item>
			  		<el-form-item>
					  <el-button type="primary" @click="resetQuery"
						><i-ep-search />搜索</el-button
					  >
					  <el-button @click="resetQuery">
						<i-ep-refresh />
						重置</el-button
					  >
					</el-form-item>
				  </el-form>
				</div>

				<el-card shadow="never">
					<template #header>
						<div class="flex justify-between">
							<div></div>
							<div>
								<el-button class="ml-3" @click="handleExport" v-hasPerm="['sys:originalOmsOrder:export']"
								><template #icon><i-ep-download /></template>导出</el-button
								>
							</div>
						</div>
					</template>
					<el-table
				  		size="small"
			  			:height="billColumnList && billColumnList.length > 0 ? 520 : 150"
							v-loading="loading"
							:data="billColumnList"
							@selection-change="handleSelectionChange"
							border
					>
						<el-table-column type="selection" width="40" align="center" />
						<el-table-column
								label="唯一标识"
								align="center" show-overflow-tooltip
								prop="pid"
								width="150"
						/>
						<el-table-column
								label="OMS单号"
								align="center" show-overflow-tooltip
								prop="orderNo"
								width="150"
						/>
						<el-table-column
								label="商店"
								width="150"
								align="center" show-overflow-tooltip
								prop="storeName"
						/>
						<el-table-column
								label="网店交易号"
								width="180"
								align="center" show-overflow-tooltip
								prop="storeTradeNo"
						/>

						<el-table-column
								label="原始交易号"
								width="140"
								align="center" show-overflow-tooltip
								prop="originalNo"
						/>

						<el-table-column
								label="子交易号"
								width="120"
								align="center" show-overflow-tooltip
								prop="subNo"
						/>
						<el-table-column
								label="订单状态"
								align="center" show-overflow-tooltip
								prop="status"
								width="100"
						/>
						<el-table-column
								label="下单时间"
								align="center" show-overflow-tooltip
								prop="purchasedTime"
								width="140"
						></el-table-column>
						<el-table-column
								label="付款时间"
								align="center" show-overflow-tooltip
								prop="paymentTime"
								width="140"
						></el-table-column>
						<el-table-column
								label="发货时间"
								align="center" show-overflow-tooltip
								prop="sendTime"
								width="140"
						></el-table-column>
						<el-table-column
								label="已付金额"
								align="center" show-overflow-tooltip
								prop="paidAmount"
								width="120"
						></el-table-column>
						<el-table-column label="品牌" prop="brandName" width="100" show-overflow-tooltip/>
						<el-table-column
								label="商品SKU"
								align="center" show-overflow-tooltip
								prop="sku"
								width="150"
						></el-table-column>
						<el-table-column
								label="条码"
								align="center" show-overflow-tooltip
								prop="productCode"
								width="150"
						></el-table-column>
						<el-table-column
								label="商品名称"
								align="center" show-overflow-tooltip
								prop="productName"
								width="150"
						></el-table-column>
						<el-table-column
								label="均摊金额"
								align="center" show-overflow-tooltip
								prop="equalizationAmount"
								width="150"
						/>
						<el-table-column
								label="数量"
								align="center" show-overflow-tooltip
								prop="qty"
								width="120"
						/>
						<el-table-column
								label="ERP单号"
								align="center" show-overflow-tooltip
								prop="erpNo"
								width="120"
						/>
						<el-table-column label="会员" prop="member" width="100" show-overflow-tooltip/>
						<el-table-column label="配货状态" prop="distributeStatus" width="100" show-overflow-tooltip/>
						<el-table-column label="支付方式" prop="payType" width="100" show-overflow-tooltip/>
						<el-table-column label="支付状态" prop="payStatus" width="100" show-overflow-tooltip/>
						<el-table-column label="发货仓库" prop="sendWarehouse" width="100" show-overflow-tooltip/>
						<el-table-column label="收货人" prop="receiver" width="100" show-overflow-tooltip/>
						<el-table-column label="收货人手机" prop="receiverPhone" width="100" show-overflow-tooltip/>
						<el-table-column label="收货人电话" prop="receiverMobile" width="100" show-overflow-tooltip/>
						<el-table-column label="收货人地址" prop="receiverAddress" width="100" show-overflow-tooltip/>
						<el-table-column label="省份" prop="province" width="100" show-overflow-tooltip/>
						<el-table-column label="市" prop="city" width="100" show-overflow-tooltip/>
						<el-table-column label="区" prop="area" width="100" show-overflow-tooltip/>
						<el-table-column label="买家姓名" prop="buyName" width="100" show-overflow-tooltip/>
						<el-table-column label="配送方式" prop="distributeType" width="100" show-overflow-tooltip/>
						<el-table-column label="定金付款时间" prop="depositPayTime" width="100" show-overflow-tooltip/>
						<el-table-column label="订单转入时间" prop="inTime" width="100" show-overflow-tooltip/>
						<el-table-column label="订单确认时间" prop="confirmTime" width="100" show-overflow-tooltip/>
						<el-table-column label="通知配货时间" prop="noticeTime" width="100" show-overflow-tooltip/>
						<el-table-column label="配货时间" prop="distributeTime" width="100" show-overflow-tooltip/>
						<el-table-column label="出库时间" prop="outTime" width="100" show-overflow-tooltip/>
						<el-table-column label="挂起人" prop="suspend" width="100" show-overflow-tooltip/>
						<el-table-column label="客户留言" prop="customerMessage" width="100" show-overflow-tooltip/>
						<el-table-column label="商家备注" prop="sellerRemark" width="100" show-overflow-tooltip/>
						<el-table-column label="订单备注" prop="orderRemark" width="100" show-overflow-tooltip/>
						<el-table-column label="预分配缺货数量" prop="preDistributeQty" width="110" show-overflow-tooltip/>
						<el-table-column label="平台规格" prop="spec" width="100" show-overflow-tooltip/>
						<el-table-column label="预计发货时间" prop="preSendTime" width="100" show-overflow-tooltip/>
						<el-table-column label="物流单号" prop="deliveryNo" width="100" show-overflow-tooltip/>
						<el-table-column label="商品金额" prop="goodsAmount" width="100" show-overflow-tooltip/>
						<el-table-column label="商品标记" prop="goodsTag" width="100" show-overflow-tooltip/>
						<el-table-column label="平台商品名称" prop="goodsName" width="100" show-overflow-tooltip/>
						<el-table-column label="平台商品ID" prop="goodsId" width="100" show-overflow-tooltip/>
						<el-table-column label="WMS订单号" prop="wmsOrderNo" width="100" show-overflow-tooltip/>
						<el-table-column label="实际支付金额（去除平台优惠）" prop="actPayAmount" width="120" show-overflow-tooltip/>
						<el-table-column label="网店优惠信息" prop="preferInfo" width="100" show-overflow-tooltip/>
						<el-table-column label="WMS推送单号" prop="wmsPushNo" width="100" show-overflow-tooltip/>
					</el-table>

					<pagination
							v-if="total > 0"
							v-model:total="total"
							v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize"
							@pagination="handleQuery"
					/>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
